<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary" onclick="sendGET()"> 发送GET请求 </button>
        <button class="btn btn-warning" onclick="sendPOST()"> 发送POST请求 </button>
        <button class="btn btn-success" onclick="sendPut()"> 发送 PUT 请求 </button>
        <button class="btn btn-danger" onclick="sendDELETE()"> 发送 DELETE 请求 </button>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>id</th>
                    <th>品牌</th>
                    <th>价格</th>
                    <th>颜色</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>
    <script>
        function sendGET() {
            /**
             * 语法： axios.get(url[,config]);
             */
            axios.get('http://localhost:3000/computers', { params: { username: 'atguigu', age: 10 } })
                .then(response => response.data)
                .then(data => {
                    console.log('get data: ', data);
                })
        }

        function sendPOST() {
            // 语法： axios.post(url, data[,config])
            axios.post('http://localhost:3000/computers',
                { name: '弘基笔记本', price: 3000, color: 'black' },
                { headers: { x: 100, y: 200 }, params: { a: 20, b: 30 } }
            )
                .then(response => response.data)
                .then(value => {
                    console.log('post data: ', value);
                })
        }

        function sendPut() {
            // 语法： axios.put(url, data[,config])
            axios.put(
                'http://localhost:3000/computers/14',
                { price: 90 }
            )
                .then(response => response.data)
                .then(data => {
                    console.log("put data : ", data);
                })
        }

        function sendDELETE(){
            // 语法： axios.delete(url[,config])
            axios.delete('http://localhost:3000/computers/14')
                .then(response=>response.data)
                .then(data=>{
                    console.log('delelte data: ', data);
                })

        }

        /**
         *  1. get delete
         *     axios.get(url[,config])
         *     axios.delete(url[,config])
         * 
         *  2. post put patch
         *     axios.post(url, data[,config])
         *     axios.put(url, data[,config])
         *     axios.patch(url, data[,config])
         * 
         * 
         */

    </script>
</body>

</html>